<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item>平台运营</el-breadcrumb-item>
      <el-breadcrumb-item>商圈维护</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">商圈维护</div>
      <div class="searchBox">
        <el-form size="mini" inline>
          <div class="block">
            <el-form-item>
              <el-button type="primary" icon="el-icon-circle-plus" @click="addArea">添加</el-button>
            </el-form-item>
          </div>
          <div class="block">
            <el-form-item label="区域选择">
              <region-select @onChangeAreas="onChangeArea"></region-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="" label="编号" align="center"></el-table-column>
        <el-table-column label="所属城市" align="center">
          <template slot-scope="data">
            <el-select v-model="data.row.city" placeholder="请选择" size="mini">
              <el-option v-for="item in cityOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商圈id" align="center"></el-table-column>
        <el-table-column label="商圈名称" align="center">
          <template slot-scope="data">
            <el-input v-model="data.row.shopArea" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="data">
            <el-select v-model="data.row.areaState" placeholder="请选择" size="mini">
              <el-option v-for="item in areaStateOption" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="data">
            <el-button type="primary" size="mini" @click="modifyArea(data.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :maxTotal="maxTotal" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange"></pagination>
      <div class="addArea" v-if="showAddArea">
        <el-form :model="option" size="mini">
          <el-form-item label="区域选择">
            <region-select @onChangeAreas="onChangeArea"></region-select>
          </el-form-item>
          <el-form-item label="商圈名称">
            <el-input v-model="option.areaName"></el-input>
            <span>新增商圈名称</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import regionSelect from 'components/regionSelect'
  import pagination from 'components/pagination'

  export default {
    data () {
      return {
        maxTotal: 20,
        tableData: [],
        cityOptions: [],
        option: {},
        areaStateOption: [
          {
            value: 0,
            label: '否'
          },
          {
            value: 1,
            label: '是'
          }
        ],
        showAddArea: false
      }
    },
    created () {
    },
    methods: {
      search () {
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      },
      modifyArea (item) {
      },
      addArea () {
        this.showAddArea = !this.showAddArea
      },
      onChangeArea (val) {
      }
    },
    components: {
      regionSelect,
      pagination
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .addArea {
    padding: 20px;

    .upload {
      text-align: center;

      .upload-demo {
        float: left;
        width: 50%;
      }

      .img {
        float: right;
        width: 50%;

        img {
          width: 358px;
          height: 178px;
          border: 1px dashed #d9d9d9;
        }
      }
    }

    .el-form {
      margin: 20px auto 0;
      width: 60%;

      .el-input {
        width: 70%;
      }
    }
  }
</style>
